<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    	<link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
		<title>地勤车况记录</title>
		<link rel="stylesheet" href="libs/wuui/weui.min.css" />
		
		<style type="text/css">
		header{
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 3;
		}
		header .search .weui-cells{
			margin-top: 0;
		}
		
		header p.car-num{
			display: flex;
			flex-direction: row;
			color: #333;
			line-height: 40px;
			background: #E6E6EA;
			padding-left: 15px;
			color: #FC444C;
			position: relative;
		}
		header p.car-num .icon-car {
			display: flex;
			width: 30px;
			line-height: 40px;
			background-image: url(img/car.png);
			background-size: 30px 30px;
			background-repeat: no-repeat;
			background-position-x: 50%;
			background-position-y: 50%;
		}
		.header {
			display: flex;
			justify-content: center;
			background: #FFFFFF;
		}
		.header p{
			line-height: 40px;
			font-weight: 700;
			color: #666;
		}
		
		
		section.content {
			display: flex;
			flex-direction: column;
			margin-top:80px;
			padding: 15px 15px 10px 15px;
		}
		.content div.pic-list{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}
		.content div.pic-list .before{
			margin-right: 10px;
		}
		.content div.pic-list .before, .content div.pic-list .after{
			flex-grow: 2;
			color: #666;
		}
		.content div.pic-list a{
			color: #666;
		}
		.content div.pic-list .header{
			justify-content: flex-start;
			font-size: 13px;
		}
		.content div.pic-list .header .sub{
			font-size: 12px;
			margin-left: 5px;
		}
		.content div.pic-list .image{
			display: flex;
			border: 1px solid #d9d9d9;
			width: 100%;
			height: 100px;
		}
		
		.content div.pic-list .after .upload-after{
			display: flex;
			position: relative;
			height: 100px;
		}
		.content div.pic-list .after .nodate{
			width:68px;
		}
		.content div.pic-list .after .upload-after:before, .content div.pic-list .after .upload-after:after{
			content: " ";
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    -webkit-transform: translate(-50%,-50%);
		    transform: translate(-50%,-50%);
		    background-color: #d9d9d9;
		}
		.content div.pic-list .after .upload-after:before{
			width: 2px;
    		height: 39.5px;	
		}
		.content div.pic-list .after .upload-after:after{
			width: 39.5px;
    		height: 2px;
		}
		
		
		
		</style>
	</head>

	<body ontouchstart>
			<header>
				<!--搜索开始-->
				<div class="search">
					<div class="weui-search-bar" id="searchBar">
			            <form class="weui-search-bar__form">
			                <div class="weui-search-bar__box">
			                    <i class="weui-icon-search"></i>
			                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="请输入车牌号" required="">
			                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> 
			                </div>
			                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
			                    <i class="weui-icon-search"></i>
			                    <span>输入车牌号进行搜索...</span>
			                </label>
			            </form>
			            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
			        </div>
			        <div class="weui-cells searchbar-result" id="searchResult" style="display: none;">
			            <!--<div class="weui-cell weui-cell_access">
			                <div class="weui-cell__bd weui-cell_primary">
			                    <p>实时搜索文本</p>
			                </div>
			            </div>-->
			        </div>
				</div><!--搜索结束-->
				<p class="car-num">
					<i class="icon-car"></i>
					<b id="searchCarNum">粤A*****</b>
					<b id="overdue" style="position: absolute;right:10px"></b>
				</p>
				<!--<div class="header">
					<p class="title">地勤车况录入系统</p>
				</div>-->
			</header>
			<div class="weui-tab">
				<div class="weui-tabbar" style="position: fixed;">
					<a id="check" href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
						<span style="display: inline-block;position: relative;">
	                        <img src="img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
						</span>
						<p class="weui-tabbar__label">车辆检测</p>
					</a>
					<a id="newHarm" href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
						<span style="display: inline-block;position: relative;">
	                        <img src="img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
						</span>
						<p class="weui-tabbar__label">新伤</p>
					</a>
					<a id="noHarm" href="javascript:;" class="weui-tabbar__item">
						<img src="img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
						<p class="weui-tabbar__label">无伤</p>
					</a>
					<a href="prefile.html" class="weui-tabbar__item">
						<span style="display: inline-block;position: relative;">
	                        <img src="img/icon_tabbar.png" alt="" class="weui-tabbar__icon">
						</span>
						<p class="weui-tabbar__label">我</p>
					</a>
				</div>
				
				<div class="weui-tab__panel">
					
					
					<section class="content">
						<div id="loading" class="weui-loadmore" style="display: none;">
							<i class="weui-loading"></i>
							<span class="weui-loadmore__tips">正在加载</span>
						</div>
						
						<div id="nodata" class="weui-loadmore weui-loadmore_line" style="display: none;">
							<span class="weui-loadmore__tips">暂无数据</span>
						</div>
						
						<div id="pic-items"></div>
						
						<div id="loadingMore" class="weui-loadmore" style="display: none;">
							<i class="weui-loading"></i>
							<span class="weui-loadmore__tips">正在加载</span>
						</div>
						<div id="loadingMoreEnd" class="weui-loadmore weui-loadmore_line" style="display: none;">
							<span class="weui-loadmore__tips">到底啦，别拉了</span>
						</div>
						<!--<div class="pic-list">
							<div class="before">
								<div class="header">处理前<small class="sub">2017-6-26</small></div>
								<a href="after_upload.html" class="image" style="background: url(img/favicon.png); background-repeat: no-repeat; background-size: 100% 100%;"></a>
							</div>
							<div class="after">
								<a href="after_upload.html">
									<div class="header">处理后<small class="sub nodate"></small></div>
									<div class="image upload-after"></div>
								</a>
							</div>
						</div>
						
						<div class="pic-list">
							<div class="before">
								<div class="header">处理前<small class="sub">2017-6-26</small></div>
								<a href="detail.html" class="image" style="background: url(img/favicon.png); background-repeat: no-repeat; background-size: 100% 100%;"></a>
							</div>
							<div class="after">
								<div class="header">处理后<small class="sub">2017-6-26</small></div>
								<a href="detail.html" class="image" style="background: url(img/favicon.png); background-repeat: no-repeat; background-size: 100% 100%;"></a>
							</div>
						</div>-->
						
						
					</section>
				</div>
				
			</div>
		
   
		<script type="text/javascript" src="libs/jquery-2.2.3.min.js" charset="UTF-8"></script>
		<!--weui.js需要在body里面加载才起作用-->
		<script type="text/javascript" src="libs/weui.js/weui.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/app.js" charset="UTF-8"></script>
		<script type="text/javascript">
	    $(function(){
	    	$('.weui-tabbar__item').on('click', function () {
	            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
	        });
	        
	        var $searchBar = $('#searchBar'),
	            $searchResult = $('#searchResult'),
	            $searchText = $('#searchText'),
	            $searchInput = $('#searchInput'),
	            $searchClear = $('#searchClear'),
	            $searchCancel = $('#searchCancel'),
	            $searchCarNum = $('#searchCarNum'),
	            $overdue = $('#overdue'),
	            $newHarm = $('#newHarm'),
	            $check = $('#check'),
	            $noHarm = $('#noHarm'),
	            $picItems = $('#pic-items'),
	            car = app.getJSONSessionStorage('car'),
	            user = app.getJSONSessionStorage('user'),
	            uploadLoading = null;
	           
	        var loading = false;
	       	var page=1, rows = 10;
	        /*if(null == user) {
				window.location.replace('login.html');
			}*/
			//获取页面顶部被卷起来的高度
			 function scrollTop(){
			  return Math.max(
			   //chrome
			   document.body.scrollTop,
			   //firefox/IE	
			   document.documentElement.scrollTop);
			 }

			//获取页面文档的总高度
			function documentHeight(){
			  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
			  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
			}
			//获取页面浏览器视口的高度
			 function windowHeight(){
			  //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
			  return (document.compatMode == "CSS1Compat")?
			  document.documentElement.clientHeight:
			  document.body.clientHeight;
			 }
			
			
			/*$(window).on('scroll',function(){
				console.log('页面文档高度：'+documentHeight() + '  浏览器视口的高度:'+windowHeight() + '   scrollTop：'+scrollTop()) ;
			  if(scrollTop() + windowHeight() >= (documentHeight() - 50)){
			   console.log('加载')
			  }
			 });*/
			
			
	        function hideSearchResult(){
	            $searchResult.hide();
	            $searchInput.val('');
	        }
	        function cancelSearch(){
	            hideSearchResult();
	            $searchBar.removeClass('weui-search-bar_focusing');
	            $searchText.show();
	        }
	        $searchText.on('click', function(){
	            $searchBar.addClass('weui-search-bar_focusing');
	            $searchInput.focus();
	        });
	        $searchInput
	            .on('blur', function () {
	                if(!this.value.length) cancelSearch();
	            })
	            .on('input', function(){
	                if(this.value.length) {
	                	$.ajax({
							type:"get",
							url:window.app.domain.API_URL_MANAGER + "/car/manager/searchCarByNum",
							data: {"num": this.value},
							success: function(result){
								if(result) {
									$searchResult.empty();
									$.map(result, function(p) {
										var div_cell = $('<div>').addClass('weui-cell weui-cell_access').appendTo($searchResult);
										var div_weui_cell_bd = $('<div>').addClass('weui-cell weui-cell_access').appendTo(div_cell);
										$('<p>').attr('data-carid', p.id).attr('data-overdue', p.overdue).html(p.carFullNum).appendTo(div_weui_cell_bd);
										
										div_cell.click(function() {
											var $p = $(this).find('p') ;
											var p_carid = $p.data('carid') ;
											var p_overdue = $p.data('overdue') ;
											var cnum = $p.html() ;
											var overdue = $p.html() ;
											
											page = 1;
											window.sessionStorage.setItem('car', JSON.stringify(p));
											$picItems.empty();
											$('#loadingMoreEnd').hide();
											
											$searchCarNum.attr('data-carid', p_carid).html(cnum);
											if(null != p_overdue && "" != p_overdue) {
												$overdue.html('逾期：'+p_overdue);
											} else {
												$overdue.html('逾期：正常');
											}
											
											loadCarStateData(p_carid) ;
											cancelSearch();
				            				$searchInput.blur();
										})
									});
									$searchResult.show();
								}
							},
							error: function(){
							}
						});
	                   
	                } else {
	                    $searchResult.hide();
	                }
	            })
	        ;
	        $searchClear.on('click', function(){
	            hideSearchResult();
	            $searchInput.focus();
	        });
	        $searchCancel.on('click', function(){
	            cancelSearch();
	            $searchInput.blur();
	        });
	        
	       	//其他页面返回到主页时获取车况信息
	       	if(null != car) {
	       		$searchCarNum.attr('data-carid', car.id).html(car.carFullNum);
	       		if(null != car.overdue && "" != car.overdue) {
					$overdue.html('逾期：'+car.overdue);
				} else {
					$overdue.html('逾期：正常');
				}
	        	loadCarStateData(car.id) ;
	       	}
	       
	       
			$(window).scroll(function(){
			 if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
			      if(loading == false){
			           loading = true;
			           page++;
			           loadCarStateData(app.getJSONSessionStorage('car').id);
			           $('#loadingMore').show();
			           $('#loadingMoreEnd').hide();
			      }
			 }
			});
	        
	        function loadCarStateData(loadCarid) {
	        	if(page == 1) {
	        		$('#nodata').hide();
	        		$('#loading').show();
	        	}
	        	$('#nodata').hide();
	        	$('#loading').show();
	        	$.ajax({
					type:"get",
					url:window.app.domain.API_URL_MANAGER + "/car/state/selectPageCarState",
					data: {"carId": loadCarid, 'page': page, 'rows': rows, 'isHarm': 1, 'sortName': 'create_time', 'sortOrder': 'desc'},
					success: function(result){
						if((page*rows) < result.total) {
							loading = false;
						} else{
							loading = true;
							$('#loadingMore').hide();
							if((page*rows) > rows) {
								$('#loadingMoreEnd').show();
							}
						}
						$('#loading').hide();
						
						var before = [
							'<div class="pic-list">',
							'	<div class="before">',
							'		<div class="header">处理前<small class="sub">{4}</small></div>',
							'		<a href="after_upload.html?carStateId={1}" class="image" style="background: url({2}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
							'	</div>',
							'	<div class="after">',
							'		<a href="after_upload.html?carStateId={3}">',
							'			<div class="header">处理后<small class="sub nodate"></small></div>',
							'			<div class="image upload-after"></div>',
							'		</a>',
							'	</div>',
							'</div>'
						];
						var after = [
							'<div class="pic-list">',
							'	<div class="before">',
							'		<div class="header">处理前<small class="sub">{5}</small></div>',
							'		<a href="detail.html?carStateId={1}"" class="image" style="background: url({3}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
							'	</div>',
							'	<div class="after">',
							'		<div class="header">处理后<small class="sub">{6}</small></div>',
							'		<a href="detail.html?carStateId={2}"" class="image" style="background: url({4}); background-repeat: no-repeat; background-size: 100% 100%;"></a>',
							'	</div>',
							'</div>'
						];
						
						if(result.rows.length > 0) {
							$.each(result.rows, function(i, p) {
								if(undefined == p.afterImageUrl || "" == p.afterImageUrl) {
									$picItems.append(app.format(before.join(''), p.id, p.beforeImageUrl, p.id, (undefined != p.beforeTime ? app.dataFormat(p.beforeTime, 'yyyy-MM-dd') : ''))) ;
								} else {
									$picItems.append(app.format(
										after.join(''), 
										p.id, 
										p.id, 
										p.beforeImageUrl, 
										p.afterImageUrl, 
										(undefined != p.beforeTime ? app.dataFormat(p.beforeTime, 'yyyy-MM-dd') : ''),
										(undefined != p.afterTime ? app.dataFormat(p.afterTime, 'yyyy-MM-dd') : '')
										)
									) ;
								}
							})
						} else {
							$picItems.empty();
							$('#nodata').show();
							$('#loadingMoreEnd').hide();
						}
					},
					error: function(){
					}
				});
	        }
	        
	        //车辆检测
	        $check.on('click', function(){
	        	var carClick = app.getJSONSessionStorage('car') ;
	        	if(null == carClick || undefined == carClick.id) {
	        		weui.alert('请输入车牌搜索到车辆后，再添加新伤');
	        	} else {
	        		window.location.href = 'cheliangjiancha.html';
	        	}
	        });
	        
	        //新伤
	        $newHarm.on('click', function(){
	        	var carClick = app.getJSONSessionStorage('car') ;
	        	if(null == carClick || undefined == carClick.id) {
	        		weui.alert('请输入车牌搜索到车辆后，再添加新伤');
	        	} else {
	        		window.location.href = 'before_upload.html';
	        	}
	        });
	        
	        //无伤
	        $noHarm.on('click', function(){
	        	var carClick = app.getJSONSessionStorage('car') ;
	        	if(null == carClick || undefined == carClick.id) {
	        		weui.alert('请输入车牌搜索到车辆后，再添加新伤');
	        	} else {
	        		weui.confirm('您确定车辆无出现新伤？', function(){
		        		uploadLoading = weui.loading('请稍等');
		        		$.ajax({
		        			url:window.app.domain.API_URL_MANAGER + "/car/state/noHarm",
							type:"post",
							data: {
								beforeUserId: user.id,
								carId: car.id,
								isHarm: 2
							},
							success: function(result){
								uploadLoading.hide() ;
						       	if(result.status) {
						    		window.location.href = 'msg.html?status=1&backTitle='+encodeURI('返回主页') ;
						       	} else {
						       		window.location.href = 'msg.html?status=2&backTitle='+encodeURI('返回')+'&message='+encodeURI('无伤发生异常') ;
						       	}
							},
							error: function(){
								uploadLoading.hide() ;
							}
						});
		        	});
	        	}
	        	
	        	
	        });
	        
	    });
		</script>
	</body>

</html>